<%@ page import="com.onlinevideo.service.CategoryService" %>
<%@ page import="com.onlinevideo.service.impl.CategoryServiceImpl" %>
<%@ page import="com.onlinevideo.entity.Category" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频上传</title>
    <link rel="stylesheet" href="../static/css/font-awesome.css">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../static/js/sweetalert.min-2.1.2.js" type="text/javascript"></script>
    <script src="../static/js/jquery.cookies.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#selectFile").click(function (event){
                event.preventDefault();
                 $("#file").trigger("click");
            });
            var x = null;
            $("#closeBtn").click(function (event){
                event.preventDefault();
                var prop = $("input[id='file']").prop("files");
                prop[0]=null;
                console.log(prop[0]);
                $("#fileinfo").find("tr").remove();
            });

            $("#videoImgFile").change(function (event){
                var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#videoImg").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                }
            });


            function getObjectURL(file) {
                var url = null ;
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
            }

            $("#file").change(function (e){
                $("#fileinfo").find("tr").remove();
                var fileMsg = x = e.currentTarget.files;
                for(var i = 0 ; i<fileMsg.length;i++){
                    var tr = "<tr ><th scope='row'>"+i+"</th><td>"+fileMsg[i].name+"</td><td>"+fileMsg[i].size+"</td><td>"+fileMsg[i].type+"</td></tr>";
                    $("#fileinfo").append(tr);
                }
            });
            $("#upload").click(function (){
                var formData = new FormData();
                var fileObj1 = document.getElementById("file").files;
                if(fileObj1.length<=0){
                    swal("提示", "请选择子集", "error").then(function (isOk) { });
                    return;
                }
                var errlist= [];
                var errlistSize=0;
                for(var i = 0 ; i<fileObj1.length;i++){
                    var  count = fileObj1[i].name.substring(0,fileObj1[i].name.indexOf('_'));
                    if(!(/^\d+$/.test(count))){
                        errlist[errlistSize]   = fileObj1[i].name ;
                        errlistSize++;
                    }
                    formData.append("video",fileObj1[i]);
                }
                if(errlist.length>0){
                    swal("提示", "{ "+errlist+" }【因命名不规范未上传,请按规范完成修改后上传，规范:集数(纯数字)_子集名称】", "error").then(function (isOk) { });
                    return;
                }
                var fileObj2 = document.getElementById("videoImgFile").files[0];
                var videoName = $("#videoName").val();
                var videoCategory = $("#videoCategory").val();
                var videoDes = $("#videoDes").val();
                formData.append("videoImg",fileObj2);
                formData.append("videoName",videoName);
                formData.append("categoryId",videoCategory);
                formData.append("videoDescription",videoDes);
                formData.append("action","upload");
                $.ajax({
                    async: false,
                    type:"post",
                    url:"../video.do",
                    data:formData,
                    processData : false, //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false, //必须false才会自动加上正确的Content-Type
                    success:function (data) {
                       var result = JSON.parse(data);
                        if (result.code == "1") {
                            swal("提示", result.message, "success").then(function (isOk) { });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {});
                        }
                    }
                });

            });
        });
    </script>
    <style>
        td,th{
            text-align: center;
        }
    </style>
</head>
<body>
<jsp:include page="header.jsp"/>
    <div class="container">
        <div class="row" >
            <div class="col-md-12" style="margin-top: 80px ;text-align:center;border: 2px solid black;">
                <div class="row">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8" >
                        <div class="col-md-12">
                            <div class="form-group">
                                <img id="videoImg" src="../uploadFile/images/lun1.jpg" alt="..." class="img-rounded" style="width: 350px;height: 200px">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8" >
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="videoName" class="col-sm-4 control-label" style="line-height: 34px;padding-right: 0px">视频名称:</label>
                                <div class="col-sm-8" style="padding-left: 0px">
                                    <input type="text" class="form-control" id="videoName" placeholder="视频名称">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="videoCategory" class="col-sm-4 control-label" style="line-height: 34px;padding-right: 0px">视频分类:</label>
                                <div class="col-sm-8" style="padding-left: 0px">
                                    <select class="form-control" id="videoCategory">
                                        <%
                                             List<Category> categories = (List<Category>)request.getAttribute("categorys");
                                            for (Category category : categories) {
                                        %>
                                        <option value="<%= category.getId()%>"><%= category.getCategoryName()%></option>
                                        <%
                                            }
                                        %>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8" >
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="videoDes" class="col-sm-4 control-label" style="line-height: 34px;padding-right: 0px">视频描述:</label>
                                <div class="col-sm-8" style="padding-left: 0px">
                                    <input type="text" class="form-control" id="videoDes" placeholder="视频描述">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="videoName" class="col-sm-4 control-label" style="line-height: 34px;padding-right: 0px">视频封面:</label>
                                <div class="col-sm-8" style="padding-left: 0px">
                                    <input id="videoImgFile" type="file" class="form-control"  placeholder="视频封面" accept="image/*">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row" >
            <div class="col-md-12" style="height: 100px ;line-height:100px;text-align:center;border: 2px solid black;">
                <button id="upload" type="button" class="btn btn-primary">上传</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="padding: 0">
                <div class="col-md-12" style="border: 2px solid black;padding: 10px;" >
                    <div class="row" style="padding: 10px;margin-left: 0">
                        <input id = "file" type="file" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;" multiple="multiple"   accept="video/*">
                        <input type="button" id="selectFile" style="display: inline-block" class="btn btn-primary" value="选择文件" >
                        <button type="button" id="closeBtn" class="btn btn-primary">取消</button>
                    </div>
                    <div class="row" style="max-height: 450px;overflow: auto;padding: 10px;margin: 0">
                        <table class="table table-bordered" style="margin-bottom:0px ">
                            <thead>
                            <tr >
                                <th>编号</th>
                                <th>文件名称</th>
                                <th>文件大小(kb)</th>
                                <th>文件类型</th>
                            </tr>
                            </thead>
                            <tbody id="fileinfo" ></tbody>
                        </table>
                    </div>

                </div>
            </div>

        </div>
    </div>
<jsp:include page="footer.jsp"/>
</body>
</html>

